<template>
    <div id="cryptos">
        <div class="pledgeRecord">
            <assets-head :title="$t('质押记录')"></assets-head>
            <div class="content px-32">
                <van-list v-model:loading="loading" :loading-text="$t('加载中...')" :finished="finished"
                    :finished-text="orderList.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130">
                    <div class="item mb-40 contBackground rounded-lg pl-24 pr-22 pb-30" v-if="item"
                        v-for="(item, index) in orderList" :key="index">
                        <div class="flex justify-between border-b-color h-101 box-border text items-center mb-30">
                            <div class="textColor font-36"
                                :class="{ 'redColor': item.orderType == 5, 'skyColor': item.orderType == 2 }">
                                {{ fixStr(item.orderType) }}</div>
                            <div class="text-grey font-32">{{ item.createTime }}</div>
                        </div>
                        <div class="flex">
                            <div class="mr-100 flex-1"
                                v-if="item.orderType == 1 || item.orderType == 3 || item.orderType == 4">
                                <div class="text-grey font-32">{{ item.orderType == 4 ? $t('还款数量') : $t('借款') }}</div>
                                <div class="textColor mt-20 font-32">{{ item.loanAmount }}&nbsp;USD</div>
                            </div>
                            <div class="mr-100 flex-1" v-if="item.orderType == 1 || item.orderType == 2">
                                <div class="text-grey">{{ $t('质押类型') }}</div>
                                <div class="textColor mt-20">{{ $t('币') }}</div>
                            </div>
                            <div class="flex-1" v-if="item.orderType == 1 || item.orderType == 2">
                                <div class="text-grey">{{ $t('质押金额') }}</div>
                                <div class="textColor mt-20">
                                    {{ item.pledgeAmount }}&nbsp;{{ item.pledgeCurrency.toUpperCase() }}</div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/Transform/assets-head/index.vue";
import { relationOrderList } from "@/service/pledgeLoan.js";
import { List } from 'vant'
export default {
    props: {

    },
    components: {
        assetsHead,
        [List.name]: List,
    },
    data() {
        return {
            id: '',
            page_no: 1,
            orderList: [],
            loading: false,
            finished: false,
        }
    },
    created() {
        this.id = this.$route.query.id
    },
    methods: {
        onLoad() {
            this.getRelationOrderList()
        },
        getRelationOrderList() {
            relationOrderList({
                loanOrderId: this.id,
                page_no: this.page_no
            }).then(res => {
                this.orderList = [...this.orderList, ...res.data]
                this.loading = false
                if (res.data.length < 10) {
                    this.finished = true
                } else {
                    this.page++
                }
            })
        },
        fixStr(orderType) {
            let str = ''
            if (orderType == 1) {
                str = this.$t('借款')
            } else if (orderType == 2) {
                str = this.$t('新增质押')
            } else if (orderType == 3) {
                str = this.$t('续借')
            } else if (orderType == 4) {
                str = this.$t('还款')
            } else if (orderType == 5) {
                str = this.$t('强平结清')
            }
            return str;
        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
    .pledgeRecord {
        width: 100%;
        box-sizing: border-box;
    }

    .redColor {
        color: $red;
    }

    .skyColor {
        color: #13D3EB;
    }
}
</style>